<script setup>
import { ref, onMounted } from 'vue'

// 用户信息
const userInfo = ref({
  username: '用户151314584195',
  avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
  gameCount: 23,
  totalValue: 4890,
  totalPlaytime: 1268
})

// 游戏库数据
const gameLibrary = ref([
  {
    id: 1,
    name: '赛博朋克 2077',
    cover: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg',
    playtime: 145,
    achievements: {
      total: 54,
      unlocked: 32
    },
    lastPlayed: '2024-06-10',
    platform: 'PC'
  },
  {
    id: 2,
    name: '艾尔登法环',
    cover: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/header.jpg',
    playtime: 268,
    achievements: {
      total: 42,
      unlocked: 18
    },
    lastPlayed: '2024-06-12',
    platform: 'PC'
  },
  {
    id: 3,
    name: '死亡搁浅：导演剪辑版',
    cover: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/header.jpg',
    playtime: 95,
    achievements: {
      total: 63,
      unlocked: 45
    },
    lastPlayed: '2024-06-08',
    platform: 'PC'
  },
  {
    id: 4,
    name: 'Counter-Strike 2',
    cover: 'https://cdn.cloudflare.steamstatic.com/steam/apps/730/header.jpg',
    playtime: 320,
    achievements: {
      total: 160,
      unlocked: 87
    },
    lastPlayed: '2024-06-13',
    platform: 'PC'
  },
  {
    id: 5,
    name: '极限竞速：地平线5',
    cover: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1551360/header.jpg',
    playtime: 85,
    achievements: {
      total: 70,
      unlocked: 32
    },
    lastPlayed: '2024-06-05',
    platform: 'PC'
  },
  {
    id: 7,
    name: '星空',
    cover: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1716740/header.jpg',
    playtime: 112,
    achievements: {
      total: 75,
      unlocked: 42
    },
    lastPlayed: '2024-06-09',
    platform: 'PC'
  },
  {
    id: 8,
    name: '博德之门3',
    cover: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1086940/header.jpg',
    playtime: 187,
    achievements: {
      total: 142,
      unlocked: 56
    },
    lastPlayed: '2024-06-11',
    platform: 'PC'
  }
])

// 计算成就完成百分比
const calculateAchievementPercentage = (game) => {
  return Math.round((game.achievements.unlocked / game.achievements.total) * 100)
}

// 格式化游玩时长
const formatPlaytime = (minutes) => {
  if (minutes < 60) {
    return `${minutes} 分钟`
  }
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  return mins > 0 ? `${hours} 小时 ${mins} 分钟` : `${hours} 小时`
}

onMounted(() => {
  // 从localStorage获取用户信息
  const savedUser = localStorage.getItem('currentUser')
  if (savedUser) {
    const user = JSON.parse(savedUser)
    userInfo.value.username = user.username || userInfo.value.username
    userInfo.value.avatar = user.avatar || userInfo.value.avatar
  }
})
</script>

<template>
  <div class="library-container">
    <!-- 用户信息区域 -->
    <section class="user-profile-section">
      <div class="user-profile">
        <div class="user-avatar-large">
          <img :src="userInfo.avatar" :alt="userInfo.username" />
        </div>
        <div class="user-details">
          <h1 class="username">{{ userInfo.username }}</h1>
          <div class="user-stats">
            <div class="stat">
              <span class="stat-value">{{ userInfo.gameCount }}</span>
              <span class="stat-label">拥有游戏</span>
            </div>
            <div class="stat">
              <span class="stat-value">¥{{ userInfo.totalValue }}</span>
              <span class="stat-label">账号价值</span>
            </div>
            <div class="stat">
              <span class="stat-value">{{ formatPlaytime(userInfo.totalPlaytime) }}</span>
              <span class="stat-label">总游玩时长</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 游戏库区域 -->
    <section class="game-library-section">
      <div class="library-header">
        <h2>我的游戏</h2>
        <div class="library-controls">
          <button class="filter-btn">最近游玩</button>
          <button class="filter-btn">游戏时长</button>
          <button class="filter-btn">成就进度</button>
        </div>
      </div>
      
      <div class="games-grid">
        <div v-for="game in gameLibrary" :key="game.id" class="game-card">
          <div class="game-cover">
            <img :src="game.cover" :alt="game.name" />
            <div class="play-button">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
              <span>开始游戏</span>
            </div>
          </div>
          <div class="game-info">
            <h3 class="game-name">{{ game.name }}</h3>
            <div class="game-meta">
              <span class="playtime">{{ formatPlaytime(game.playtime) }}</span>
              <span class="last-played">最后游玩: {{ game.lastPlayed }}</span>
            </div>
            <div class="achievement-progress">
              <div class="progress-bar">
                <div 
                  class="progress-fill" 
                  :style="{ width: `${calculateAchievementPercentage(game)}%` }"
                ></div>
              </div>
              <span class="progress-text">
                {{ game.achievements.unlocked }}/{{ game.achievements.total }} 成就
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.library-container {
  min-height: 100vh;
  background-color: #121212;
  color: #ffffff;
  padding: 20px;
}

/* 用户信息区域样式 */
.user-profile-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 30px;
}

.user-avatar-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 71, 87, 0.3);
}

.user-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ffffff;
}

.user-stats {
  display: flex;
  gap: 50px;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #ff4757;
  margin-bottom: 5px;
}

.stat-label {
  display: block;
  font-size: 14px;
  color: #b0b0b0;
}

/* 游戏库区域样式 */
.game-library-section {
  margin-bottom: 50px;
}

.library-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.library-header h2 {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
}

.library-controls {
  display: flex;
  gap: 15px;
}

.filter-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: rgba(255, 71, 87, 0.2);
  border-color: #ff4757;
  color: #ff4757;
}

/* 游戏网格布局 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.game-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.game-cover {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.game-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.game-card:hover .game-cover img {
  transform: scale(1.05);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 71, 87, 0.9);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-weight: bold;
}

.game-card:hover .play-button {
  opacity: 1;
}

.play-button:hover {
  background: rgba(255, 71, 87, 1);
  transform: translate(-50%, -50%) scale(1.05);
}

.game-info {
  padding: 15px;
}

.game-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: #b0b0b0;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4757, #ff6b81);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 12px;
  color: #ff4757;
  min-width: 100px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-profile {
    flex-direction: column;
    text-align: center;
  }
  
  .user-stats {
    justify-content: center;
    gap: 30px;
  }
  
  .library-header {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  
  .library-controls {
    justify-content: center;
  }
  
  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .user-stats {
    flex-direction: column;
    gap: 15px;
  }
  
  .stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
  }
  
  .stat:last-child {
    border-bottom: none;
  }
  
  .games-grid {
    grid-template-columns: 1fr;
  }
}
</style>